/**
		Copyright (c) 2013 ICRL
		See the file license.txt for copying permission.

		Name: glycocross (is the name fine?)
		Version: 0.1 i pre-alpha
		Description: A html widget to cross link glycomic databases using a gycomeoi-Db API.
		Authors: Giorgio Carta, ...
				
		Note: We cannot use JQUERY or any other framework to avoid local side conflicts.
		      All the variable MUST have local scope to avoid local sid conflicts - NO GLOBALS ALLOWED!

				
		-- server side script --
		// 
		// Google Chrome (Ubuntu): OK
		// Firefox (Ubuntu): OK
		// Safari: @TODO
		// IE (all versions): @TODO

**/

	GlycoWidget = new function() {

		// the the data
		// local_db: the database from which the request is made. 
		this.requestContent = function(local_db) {

			var script = document.createElement('script');	// inject head with script source
			var sel = document.getElementById("glyco_select");
			var search_id = sel.getAttribute("val");
			var selectedText = sel.options[sel.selectedIndex].text;
			console.log('local id: ' + search_id);  // @TODO disample logs in production!!
			console.log('local db: ' + local_db);
			console.log('foreign db: ' + selectedText);

			// this is just to simulate a API call 
			// @TODO replace with actual glycomedb url one api is implemented
			if (selectedText == "glycomedb") {
				// requset example:
				// http://api_url.action?db_from=foo&db_to=moo%id=1000000
				// add here the search id to API query
				script.src = './json_data/glycotest_one.js';
			} else if (selectedText == "glycobase") {
				script.src = './json_data/glycotest_two.js';
			}

			// @TODO append to glyco_header tag instead ??
			document.getElementsByTagName('head')[0].appendChild(script);
		}	

		// entry point
		// inits dom elements and get the data
		// local_id: the database id from which the reqeust is made
		// local_db: the database from which the request is made. 
		this.init = function(local_id,local_db) {
			this.createDOM(local_id,local_db);
			GlycoWidget.requestContent(local_db);
			// below we can add a call to create the dom of the widget

		}

		// this function is called once the script element is attached to the tag head of the host html.
		this.serverResponse = function(data) {
			// inject json result into widget
			var div_header = document.getElementById("glyco_header");
			var div_list = document.getElementById("glyco_list");
			var div_descr = document.getElementById("glyco_descr");
			
			div_header.innerHTML = 'Searching in ' + data.db + '';
			// @TODO:
			// add here code to check for null values, i.e. id does not exit

			div_descr.innerHTML = data.description;
			div_list.innerHTML = "";
			for (i in data.id) {
				div_list.innerHTML =  div_list.innerHTML  + '<a href="' + data.link + '">' + data.db + ' Id '  + data.id[i] + '</a><br />';
			}

		}

		this.createDOM = function(local_id,local_db) {
			//@TODO: division ids should be renamed using more exotic names to 
			// avoid client side conflicts.

			var widget_html = '<div id="glyco_header"> ' +
				'</div> ' +
				'<div id="glyco_selector">Select Database ' +
				    '<select id="glyco_select" onchange="GlycoWidget.requestContent(\''+ local_db + '\');" val="' + local_id +  '"> ' +
				        '<option value="glycomedb">glycomedb</option> ' +
				        '<option value="glycobase">glycobase</option> ' +
					'<option value="unicarbkb">unicarb-kb</option> ' +
				        '<option value="whatever">whateve</option> ' +
				    '</select> ' +
				'</div>' + 
				'<div id="glyco_result">' +
			        '<div id="glyco_id"></div>' + 
			        '<div id="glyco_descr"></div>' +
				'<div id="glyco_list" style="height:80px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;"></div>'
				'</div>';
			// @TODO
			// append link to dev page, documentation, blah blah -
			document.getElementById("glyco_container").innerHTML = widget_html;	
		}

	};

